<template>
  <div v-loading="listLoading" class="app-container gw-home" style="box-shadow: none">
    <!-- 0左侧 -->
    <div class="home-part left-home-part">
      <div class="home-left">
        <!-- 一. 左侧的设备列表整体区域 -->
        <div class="panel-container source-list">
          <!-- <div class="panel-title panel-title-grey">设备列表</div> -->
          <!-- 1 播放树的搜索区域 -->
          <div class="device-tree-title">
            <div class="title">设备列表</div> 

            <!-- 旧搜索框已删除 -->
            <!-- <el-input
              class="tree-search"
              size="small"
              placeholder="请输入检索内容"
              v-model="filterText"
              @keyup.native="searchTree">
              <i slot="suffix" class="el-input__icon el-icon-search search-icon" @click="searchTree"></i>
            </el-input> -->
          </div>
          <!-- 2 存放播放树的 容器 -->
          <div class="tree-container">
            <device-tree
              ref="qnDeviceTree"
              class="addr-tree"
              :grid_len="grid_len"
              :grid_select="grid_select"
              @node-click="clickTree"
            />
          </div>
          <!-- 3 播放树下边的 展开按钮 (是否展开全部播放树 ) -->
          <div class="coverPlatform" @click="coverPlatform = !coverPlatform">
            <i class="iconfont" :class="coverPlatform ? 'icontwo-up' : 'icontwo-down'" />
          </div>
        </div>
        <!-- 二. 左侧的云台控制区域 -->
        <!-- <div v-show="!coverPlatform" class="panel-container camera-platform">
          <div class="panel-title panel-title-grey">云台控制</div>
          <div class="camera-directive">
            <div v-show="rtmpSrc === '' || rtmpType !== 2" class="float-layer"></div>
            <div class="directive-container" :class="{'not-allowed': rtmpSrc === '' || rtmpType !== 2}">
              <p>
                <i class="iconfont icon-direction icon1 is-disabled" @click="changePtz('PTZ_EXTPTZ_LEFTTOP')"></i>
                <i class="iconfont icon-direction icon2" @click="changePtz('PTZ_UP_CONTROL')"></i>
                <i class="iconfont icon-direction icon3 is-disabled" @click="changePtz('PTZ_EXTPTZ_RIGHTTOP')"></i>
              </p>
              <p>
                <i class="iconfont icon-direction icon4" @click="changePtz('PTZ_LEFT_CONTROL')"></i>
                <i class="iconfont icon-reset icon5"></i>
                <i class="iconfont icon-direction icon6" @click="changePtz('PTZ_RIGHT_CONTROL')"></i>
              </p>
              <p>
                <i class="iconfont icon-direction icon7 is-disabled" @click="changePtz('PTZ_EXTPTZ_LEFTDOWN')"></i>
                <i class="iconfont icon-direction icon8" @click="changePtz('PTZ_DOWN_CONTROL')"></i>
                <i class="iconfont icon-direction icon9 is-disabled" @click="changePtz('PTZ_EXTPTZ_RIGHTDOWN')"></i>
              </p>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <!-- 1右侧 -->
    <div class="home-part right-home-part">
      <!-- <tagsNav :routeList="routeList"></tagsNav> -->
      <div class="panel-container home-right" style="position: relative;">
        <!-- 日历组件 -->
        <div class="calendar">
          <Calendar ref="calendar" @dletbeforeIndex="dletbeforeIndex" @dletvideoSrc="dletvideoSrc" />
          <!-- 下方的视屏列表 -->
          <div v-show="videoList.length != '0'" class="videoList">
            <div class="videoListHead">回放视频列表({{ videoList.length }}段)</div>
            <div v-for="(item, index) in videoList" :key="index">
              <div :id="index+1" class="quantityList" @click="choiceList(item, index)">
                <div>{{ item.startTime }}</div>
                <div>至</div>
                <div>{{ item.endTime }}</div>
              </div>
            </div>
          </div>
          <Empty v-show="videoList.length == '0'" style="padding-top: 0px;" />
        </div>
        <div class="panel-title2">
          <span>历史回放</span>
          <!-- <button @click="ceshi">测试</button> -->
        </div>
        <!-- 播放器区域 -->
        <div id="gwh" class="panel-content">
          <CanvasEdt
            :ref="'cpcvs' + index"
            style="z-index: 3"
            :cvs-data="cvsData"
            :device_id="did"
            :channel_id="cid"
            @add_workorder="addWork"
          />
          <dialog-wk
            :index="index"
            :img_url="img_url"
            :device_id="did"
            :channel_id="cid"
            :single-graph-i-d="singleGraphID"
            :single-graph-name="singleGraphName"
          />
          <ImgsWO ref="ImgsWO" :batch-pictures-arr="batchPicturesArr" />
          <div
            v-if="tabActive12_3"
            ref="videoArea"
            style="width: 75%; height: 75%"
            class="video-content"
            :class="'video-item-' + grid_len"
          >
            <!-- 播放器 -->
            <div v-for="i in grid_len" :key="i" class="video-item">
              <PlayerBoxHP
                style="border: 0px !important"
                :stream_type="videoStream"
                :ref="'videoPlayer' + (i - 1)"
                :player_index="i - 1"
                :is_active="grid_select == i - 1 && has_active"
                @timeChange="timeChange"
                @passID2="chuanId2"
                @handleitem="handleGrid(arguments)"
              />
            </div>
            <!-- 模拟进度条 （style="margin-left: -1px;"） -->
            <div class="time-scroll">
              <div class="time-s-box">
                <!-- x轴 坐标刻度: 小时 -->
                <div class="hours">
                  <div v-for="(i, index) in hours" :key="index" class="item">
                    <span>{{ i }}:00</span>
                    <!-- <div class="rule" v-for="n in 3" :key="n"></div> -->
                  </div>
                  <div class="item"><span>60:00</span></div>
                </div>
                <!-- 若有视频: 横向柱图 -->
                <div class="history-list" @mouseleave="showBar = false">
                  <div v-show="showBar" class="time-bar"><span id="timeStamp" /></div>
                  <div
                    v-for="(i, index) in resultList"
                    :key="index"
                    class="item"
                    :style="{ left: i.leftTimeRatio + '%', width: i.timeRatio + '%' }"
                    @mousemove="historyMove($event)"
                    @mouseleave="showBar = false"
                    @click="playVideoTime(i, index, $event)"
                  >
                    <div />
                  </div>
                  <!-- 横向柱图的游标进度 -->
                  <div class="cursorProgress">
                    <div class="cursorInnerLayer" :style="{ width: this.cursorInnerLayerWidth + '%' }" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="tabActive12_2" ref="videoArea" class="video-content" :class="'video-item-' + grid_len">
            <div v-for="i in grid_len" :key="i" class="video-item12_2">
              <!-- 播放器 -->
              <PlayerBoxPH
                :ref="'videoPlayer' + (i - 1)"
                :stream_type="videoStream"
                :player_index="i - 1"
                :is_active="grid_select == i - 1 && has_active"
                @handleitem="handleGrid(arguments)"
              />
            </div>
          </div>
          <div v-if="tabActive12_2_old" ref="videoArea" class="video-content" :class="'video-item-' + grid_len">
            <div v-for="i in grid_len" :key="i" class="video-item12_2">
              <!-- 播放器 -->
              <PlayerBoxHP
                :ref="'videoPlayer' + (i - 1)"
                :stream_type="videoStream"
                :player_index="i - 1"
                :is_active="grid_select == i - 1 && has_active"
                @handleitem="handleGrid(arguments)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2 批量的弹框 -->
    <el-dialog
      :before-close="crossSign"
      title="批量抓拍"
      :visible.sync="dialogFormVisible"
      width="60%"
      :close-on-click-modal="false"
      center
      @open="show"
    >
      <div id="gwwh" ref="img-container" class="img-container">
        <div
          v-for="(item, i) in this.multiGraphArr.length"
          :id="'canWH' + i"
          :key="i"
          style="position: relative"
          :class="['img-item', grid_len_width]"
        >
          <canvas :id="'myCanvas' + i" @click="selectCanvas(i)" />
          <!-- 勾选框 -->
          <div
            style="
              background-color: rgb(255, 255, 255);
              position: absolute;
              top: 0;
              right: 0;
            "
            @click="selectCanvas(i)"
          >
            <i :id="'Tick' + i" class="el-icon-success" style="display: none" />
            <i :id="'NOTick' + i" class="el-icon-remove" style="display: block" />
          </div>
        </div>

        <!-- 画板编辑 -->
        <!-- <div id="gwwh" class="block" style="width: 100%;height: 100%;">
          <el-carousel trigger="click" :autoplay="false" style="width: 100%;height: 100%;">
            <el-carousel-item v-for="(item, i) in this.grid_len" :key="i" style="width: 100%;height: 100%;display: flex;justify-content: space-around;">
              <canvas :id="'myCanvas'+i"></canvas>
            </el-carousel-item>
          </el-carousel>
        </div> -->
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button class="plain-btn" @click="multiGraphCancellation">取消</el-button>
        <el-button class="fill-btn" @click="multiMapSubmission">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./atrament.min.js"></script>

<script>
  // import DeviceTree from '@/components/DeviceTree/index.vue'
  // import RTMPDeviceVideoPlayer from '@/components/DeviceVideoPlayer/index.vue'
  // import HLSDeviceVideoPlayer from '@/components/DeviceVideoPlayer/qnPlayer.vue'
  // import { playRtmpById, playRtmpByIdNew, finishRtmpById, ptzControl, getHeartBeat } from '@/api/home.js'
  // import { getVideoStreamType } from '@/api/setting.js'
  import Empty from "@/components/Empty/index.vue";
  import {
    getVideourl,
    getVideoListByCon,
    ControlPlaybackStream,
    getPlaybackStream
  } from "@/api/video.js";
  import {
    listEvaluate
  } from "@/api/workorder.js";
  import {
    listUser
  } from "@/api/permission.js";

  import tagsNav from "@/components/Header/tagsNav";
  import "jquery.nicescroll";
  import DeviceTree from "@/components/Address/DeviceTree";

  import PlayerBoxHP from "@/components/DeviceVideoPlayer/PlayerBoxHP";
  import CanvasEdt from "@/components/CanvasEdt.vue";
  import DialogWk from "@/components/Workorder/DialogWk.vue";
  import ImgsWO from "@/components/Workorder/ImgsWO";

  // -------------------------------------------
  import Calendar from '@/components/HistoryVideoPlayer/datePicker/index.vue'

  // 退出全屏
  var exitWebFS = (that) => {
    return function(e) {
      if (e.key === "Escape" && !e.repeat) {
        if (document.body.classList.contains("web-fullscreen-fix")) {
          document.body.classList.remove("web-fullscreen-fix");
          if (that.videoStream === "HLS") return;
          that.getHW();
        }
      }
    };
  };

  export default {
    components: {
      PlayerBoxHP,
      DeviceTree,
      tagsNav,
      CanvasEdt,
      DialogWk,
      ImgsWO,
      Calendar,
      Empty
    },
    data() {
      return {
        batchPicturesArr: [],
        WOsIdArr: [],
        multiGraph: "",
        multiGraphArr: [],
        did: "",
        cid: "",
        cvsData: null,
        img_url: "",
        index: "",
        videoPlayTimer: null,
        has_active: false,
        grid_select: -1,
        grid_len: 1,

        cameraIds: [],
        // 保存当前活跃宫格中 播放器的播放参数-----------------------
        rtmpSrc: "", // 操作云台的地址
        rtmpType: "", // 设备类型  目前只球机可以控云台
        // deviceIndex: -1, // 播放的设备是第几个
        deviceId: "",
        gatewayId: "",
        channelNum: "",
        //----------------------------------------
        playerWidth: "",
        playerHeight: "",
        videoStream: "HLS",
        // stream_type: 'xFLV',
        videoStreamId: "",
        routeList: [],
        coverPlatform: false,
        filterText: "",
        tabActive12_2: false,
        tabActive12_3: true,
        tabActive12_2_old: false,
        ipcArrs: {},

        dialogFormVisible: false,
        role_list: [], // 按钮权限
        gongGeArr: [{
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
          {
            pointName: "",
            pointId: "",
            deviceId: "",
            channelId: ""
          },
        ],
        // 暂存的通道id和设备id的合集
        idsTS: [],
        // 暂存网点和网点名字的合集
        singleGraph: [],
        // 单图的工单id
        singleGraphID: "",
        // 单图的工单名字
        singleGraphName: "",
        progressW: "",
        // ---------------------------------------------------------------------------------
        hours: [0, 10, 20, 30, 40, 50],
        // 时间轴数据
        resultList: [{
          timeRatio: 0,
          leftTimeRatio: 0
        }],
        showBar: false,
        // 存放打开的摄像头通道id和设备id
        HISchannelId: '',
        HISdeviceId: '',
        cehsifskaf: '',
        // 视屏列表
        videoList: [],
        // 前一个高亮吗
        beforeIndex: '',
        // 点击传的时间
        startTimeFe: '',
        endTimeFe: '',
        // 存放的时间
        clickTime: '',
        // 游标内层
        cursorInnerLayerWidth: 0,
        // 节流限时
        current: true,
        // 遮罩层
        listLoading: false
      };
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player;
      },
      grid_len_width() {
        if (this.multiGraphArr.length == 1) return "w99";
        else if (this.multiGraphArr.length <= 4) return "w49";
        else if (this.multiGraphArr.length <= 9) return "w32";
        else if (this.multiGraphArr.length <= 12) return "w24";
        else if (this.multiGraphArr.length <= 16) return "w24";
        else if (this.multiGraphArr.length <= 24) return "w16";
        else if (this.multiGraphArr.length <= 25) return "w19";
      },
    },
    mounted() {
      let menuList = JSON.parse(localStorage.getItem("menuList"));
      if (menuList && menuList.length) {
        menuList.map((item) => {
          if (item.id === "805") {
            this.routeList = JSON.parse(JSON.stringify(item.children));
          }
        });
        for (let item of this.routeList) {
          item.path = "/" + item.pathName;
        }
      }
      window.onresize = () => {
        if (this.videoStream === "HLS") return;
        // if (this.stream_type == 'xFLV' || this.stream_type =='xHLS' || this.stream_type == 'HLS') return
        this.getHW();
      };
      // this.getVideoStreamType() // 获取码流类型
      document.addEventListener("keydown", exitWebFS(this));

      // 下拉回显--------------------------
      listEvaluate().then((res) => {
        this.list_workorder = res.data;
        this.$store.dispatch("workorder/getWorkorderType", res.data);
      });
      listUser().then((res) => {
        this.list_user = res.data;
        this.$store.dispatch("workorder/getListUser", res.data);
      });

      this.role_list = this.$store.getters.menu_code_list;
    },
    beforeDestroy() {
      window.onresize = null;
      document.removeEventListener("keydown", exitWebFS(this));

      window.clearInterval(this.videoPlayTimer);
    },
    watch: {
      playerWidth() {
        this.rotate();
      },
      playerHeight() {
        if (this.tabActive12_2 == true) {
          this.rotate2();
        } else if (this.tabActive12_2_old == true) {
          this.rotate();
        } else {
          this.rotate();
        }
      },
    },
    methods: {
      ceshi() {
        let a = Infinity
        console.log(a == a - 1)
        // this.$refs["videoPlayer" + 0][0].videoSrc =
        //   'https://pro-pl.video.tencentcs.com/rtp/40203672.m3u8?txSecret=dae1b1cc2ab2d7a532bfda3f6e5e4b29&txTime=6211F901';
      },
      // 时间变化
      timeChange(time) {
        // 都是时间戳，秒级变化
        // console.log('时间变化 :>> ', parseInt(time))
        // console.log('点击的时间 :>> ', this.clickTime)
        // console.log('起始的时间 :>> ', Date.parse(new Date(this.startTimeFe))/1000)
        // console.log('结束的时间 :>> ', Date.parse(new Date(this.endTimeFe))/1000)

        // 现在提前20s结束，预防流不准确
        if (this.clickTime == '') {
          if (((Date.parse(new Date(this.endTimeFe)) / 1000) - (Date.parse(new Date(this.startTimeFe)) / 1000) -
              parseInt(time)) < 20) {
            this.$refs["videoPlayer" + 0][0].videoSrc = ''
            this.cursorInnerLayerWidth = 0
            this.$notify({
              message: '播放结束',
              type: 'info',
              duration: 4000
            })
            let beforevidlist = document.getElementById(this.beforeIndex)
            beforevidlist.style = ''
            this.beforeIndex = ''
          }
          this.cursorInnerLayerWidth = time / 3600 * 100
        } else {
          if (((Date.parse(new Date(this.endTimeFe)) / 1000) - (Date.parse(this.clickTime) / 1000) - parseInt(time)) <
            20) {
            this.$refs["videoPlayer" + 0][0].videoSrc = ''
            this.cursorInnerLayerWidth = 0
            this.$notify({
              message: '播放结束',
              type: 'info',
              duration: 4000
            })
            let beforevidlist = document.getElementById(this.beforeIndex)
            beforevidlist.style = ''
            this.beforeIndex = ''
          }
          this.cursorInnerLayerWidth = (this.clickTime.slice(14, 16) * 60 + this.clickTime.slice(17, 19) * 1 + time) /
            3600 * 100
        }
      },
      // 点击视屏列表
      choiceList(item, index) {
        this.dlettimeChange()
        if (this.beforeIndex != '') {
          // 第二次点击
          if (this.beforeIndex == index + 1) {
            // 点击的同一个
            let beforevidlist = document.getElementById(this.beforeIndex)
            if (beforevidlist.style.backgroundColor == 'rgb(172, 176, 184)') {
              // 原先高亮
              this.$refs["videoPlayer" + 0][0].videoSrc = ''
              beforevidlist.style = ''
              this.cursorInnerLayerWidth = 0
              // this.current = true
              // setTimeout(() => {
              //   this.current = true
              // }, 10000);
            } else {
              // 原先不高亮
              if (this.current) {
                this.current = false

                // 执行的操作
                beforevidlist.style.backgroundColor = 'rgb(172, 176, 184)'
                this.getPlaybackStreamListLoading(item.recordId)

                this.startTimeFe = item.startTime
                this.endTimeFe = item.endTime
                this.resultList[0].timeRatio = item.oneHourTimeRatio

                setTimeout(() => {
                  this.current = true
                }, 10000);
              } else {
                this.$notify({
                  message: '请勿频繁请求(10s内)',
                  type: 'warning',
                  duration: 4000
                })
              }
            }
            this.beforeIndex = index + 1

          } else {
            // 点击的是不同的
            if (this.current) {
              this.current = false

              // 执行的操作
              let beforevidlist = document.getElementById(this.beforeIndex)
              beforevidlist.style = ''
              let vidlist = document.getElementById(index + 1)
              vidlist.style.backgroundColor = 'rgb(172, 176, 184)'
              this.getPlaybackStreamListLoading(item.recordId)
              this.beforeIndex = index + 1

              this.startTimeFe = item.startTime
              this.endTimeFe = item.endTime
              this.resultList[0].timeRatio = item.oneHourTimeRatio

              setTimeout(() => {
                this.current = true
              }, 10000);
            } else {
              this.$notify({
                message: '请勿频繁请求(10s内)',
                type: 'warning',
                duration: 4000
              })
            }
          }
        } else {
          // 未点击
          if (this.current) {
            this.current = false

            // 执行的操作
            let vidlist = document.getElementById(index + 1)
            vidlist.style.backgroundColor = 'rgb(172, 176, 184)'
            this.getPlaybackStreamListLoading(item.recordId)
            this.beforeIndex = index + 1

            this.startTimeFe = item.startTime
            this.endTimeFe = item.endTime
            this.resultList[0].timeRatio = item.oneHourTimeRatio

            setTimeout(() => {
              this.current = true
            }, 10000);
          } else {
            this.$notify({
              message: '请勿频繁请求(10s内)',
              type: 'warning',
              duration: 4000
            })
          }
        }
        
      },
      // 切换上面时间时清空高亮和播放
      dletbeforeIndex() {
        if (this.beforeIndex != '') {
          let beforevidlist = document.getElementById(this.beforeIndex)
          beforevidlist.style = ''
          this.beforeIndex = ''
          this.$refs["videoPlayer" + 0][0].videoSrc = ''
          this.cursorInnerLayerWidth = 0
          // 顺便加上清空点击时间
          this.dlettimeChange()
        }
      },
      // 切换上面时间时清空高亮和播放
      dletvideoSrc() {
        this.$refs["videoPlayer" + 0][0].videoSrc = ''
        this.cursorInnerLayerWidth = 0
        // 顺便加上清空点击时间
        this.dlettimeChange()
      },
      // 清空点击时间
      dlettimeChange() {
        this.clickTime = ''
      },
      // 发起获取历史回放流的请求
      getPlaybackStream(item) {
        getPlaybackStream({
          deviceId: this.HISdeviceId,
          channelId: this.HISchannelId,
          // deviceId: '43b64da0b8ec43f7b37d85f36cef67e4',
          // channelId: '433eb0a8018843848cd4b093bd20ea55',
          recordId: item
        }).then(res => {
          this.$refs["videoPlayer" + 0][0].videoSrc = res.data.hlsAddr
        }).catch(res => {
          this.$message({
            message: "网络错误请重新请求",
            type: "error",
          })
          this.$refs["videoPlayer" + 0][0].videoSrc = ''
        })
      },
      // 发起获取历史回放流的请求(有遮罩层)
      getPlaybackStreamListLoading(item) {
        this.listLoading = true
        getPlaybackStream({
          deviceId: this.HISdeviceId,
          channelId: this.HISchannelId,
          // deviceId: '43b64da0b8ec43f7b37d85f36cef67e4',
          // channelId: '433eb0a8018843848cd4b093bd20ea55',
          recordId: item
        }).then(res => {
          this.$refs["videoPlayer" + 0][0].videoSrc = res.data.hlsAddr
          this.listLoading = false
        }).catch(res => {
          this.$message({
            message: "网络错误请重新请求",
            type: "error",
          })
          this.$refs["videoPlayer" + 0][0].videoSrc = ''
          this.listLoading = false
        })
      },
      // 鼠标在播放器的横向进度条 上移动触发
      historyMove(e) {
        let offset = ''
        if (e.target.className === '') {
          offset = e.target.parentElement.offsetLeft + e.offsetX
        } else if (e.target.className === 'item') {
          offset = e.target.offsetLeft + e.offsetX
        }
        const historyList = document.getElementsByClassName('history-list')[0]
        const sec = parseInt((offset / historyList.clientWidth) * 3600)
        const getTime = (val) => {
          if (val <= 0) {
            return '00:00:00'
          } else {
            let hour = parseInt(val / 3600)
            if (hour <= 9) hour = '0' + hour
            let min = parseInt(val / 60) % 60
            if (min <= 9) min = '0' + min
            let sec = val % 60
            if (sec <= 9) sec = '0' + sec
            return hour + ':' + min + ':' + sec
          }
        }
        const time = getTime(sec)
        if (!this.showBar) this.showBar = true
        const timeBar = document.getElementsByClassName('time-bar')[0]
        timeBar.getElementsByTagName('span')[0].innerText = time
        timeBar.style.left = offset + 'px'
      },
      // 点击视屏进度
      playVideoTime(i, index, event) {
        if (this.startTimeFe == '' && this.endTimeFe == '') {
          this.$notify({
            message: '请先选需要播放的列表',
            type: 'warning',
            duration: 4000
          })
        } else {
          let timeStamp = document.getElementById('timeStamp').innerHTML
          // console.log('开始时间 :>> ', this.startTimeFe)
          // console.log('结束时间 :>> ', this.endTimeFe)
          // console.log('点击的时间 :>> ', timeStamp)
          // console.log('第一段 :>> ', this.startTimeFe.slice(0, 13))
          // console.log('第二段 :>> ', timeStamp.slice(-6))
          // console.log('转换的时间 :>> ', this.startTimeFe.slice(0, 13) + timeStamp.slice(-6))
          if (timeStamp == '01:00:00') {
            this.$refs["videoPlayer" + 0][0].videoSrc = ''
            this.cursorInnerLayerWidth = 0
            // 游标置顶
            this.cursorInnerLayerWidth = 100
          } else if (timeStamp == '00:00:00') {
            if (this.current) {
              this.current = false
              // 执行的操作
              this.clickTime = this.startTimeFe
              this.getPlaybackStream(this.startTimeFe + '_' + this.endTimeFe)
              // 游标归零
              this.cursorInnerLayerWidth = 0
              setTimeout(() => {
                this.current = true
              }, 10000);
            } else {
              this.$notify({
                message: '请勿频繁请求(10s内)',
                type: 'warning',
                duration: 4000
              })
            }
          } else {
            if (this.current) {
              this.current = false
              // 执行的操作
              this.clickTime = this.startTimeFe.slice(0, 13) + timeStamp.slice(-6)
              let startTime = new Date(this.startTimeFe.slice(0, 13) + timeStamp.slice(-6)).getTime() / 1000
              let endTime = new Date(this.endTimeFe).getTime() / 1000
              this.getPlaybackStream(startTime + '_' + endTime)
              // 游标进度
              this.cursorInnerLayerWidth = (timeStamp.slice(3, 5) * 60 + timeStamp.slice(6, 8) * 1) / 3600 * 100
              setTimeout(() => {
                this.current = true
              }, 10000);
            } else {
              this.$notify({
                message: '请勿频繁请求(10s内)',
                type: 'warning',
                duration: 4000
              })
            }
          }
        }
      },
      selectCanvas(i) {
        // 勾选变色
        var Tick = document.getElementById("Tick" + i);
        var NOTick = document.getElementById("NOTick" + i);
        if (Tick.style.display == "none") {
          Tick.style = "display: block";
          NOTick.style = "display: none;";
        } else {
          Tick.style = "display: none";
          NOTick.style = "display: block;";
        }

        // 给数组赋值
        if (this.WOsIdArr.length == 0) {
          this.WOsIdArr.push(i);
        } else {
          if (this.WOsIdArr.indexOf(i) == -1) {
            this.WOsIdArr.push(i);
          } else {
            this.WOsIdArr.splice(this.WOsIdArr.indexOf(i), 1);
          }
        }

        console.log("最终数组 :>> ", this.WOsIdArr);
      },
      // 多图取消
      multiGraphCancellation() {
        this.dialogFormVisible = !this.dialogFormVisible;
        // 清空图片的数组
        this.multiGraphArr = [];
        // 清空勾选数组
        this.WOsIdArr = [];
        // 清空传送的数组
        this.batchPicturesArr = [];
      },
      // 叉号事件
      crossSign() {
        this.multiGraphCancellation();
      },
      // 多图确认
      multiMapSubmission() {
        if (this.WOsIdArr.length == 0) {
          this.$notify({
            message: "请勾选图片生成工单",
            type: "warning",
            duration: 4000,
          });
        } else {
          this.WOsIdArr.forEach((element) => {
            let myCanvaswh = document.getElementById("myCanvas" + element);
            this.batchPicturesArr.push({
              // 图片的连接
              imgUrl: myCanvaswh.toDataURL(),
              // 网点id
              pointId: "",
              // 工单类型[]
              checkItemIds: [],
              // 优先级
              priority: "",
              // 指派给( 处理人 )
              dealWithUserId: "",
              // 抄送至
              copyUserId: "",
              // 备注
              remark: "",
              // 通道和设备id
              workOrderDeviceChannels: [{
                deviceId: this.idsTS[element].deviceId,
                channelId: this.idsTS[element].channelId,
              }, ],
              // 图片id
              pictureId: [],
              // 图片类型
              pictureType: "rectify-before",
              // 处理时限
              dealWithTime: "",
              // 就是工单类型，用来暂存
              workorder_type: "",
              // 下面网点id和名字
              pointName: this.singleGraph[element].pointName,
              pointId: this.singleGraph[element].pointId,
            });
          });
          this.$refs["ImgsWO"].open();
        }
      },
      // 批量抓图
      batchSnapshot() {
        for (let index = 0; index < this.grid_len; index++) {
          var Videos = document.getElementById(
            "liveVideo" + index + "_html5_api"
          );
          var parentComponent = document.getElementById("gwh");

          var canvas = document.createElement("canvas");
          var ctx = canvas.getContext("2d");
          canvas.width = parentComponent.offsetWidth - 58;
          canvas.height = parentComponent.offsetHeight;

          ctx.drawImage(Videos, 0, 0, canvas.width, canvas.height);
          const url = canvas.toDataURL("image/png");

          // 判断是否为空并赋值
          var blank = document.createElement("canvas");
          blank.width = canvas.width;
          blank.height = canvas.height;
          if (blank.toDataURL() == url) {} else {
            console.log("第几个宫格的图片 :>> ", index);
            console.log("对应的通道id :>> ", this.gongGeArr[index].deviceId);
            console.log("对应的设备id :>> ", this.gongGeArr[index].channelId);
            this.idsTS.push({
              deviceId: this.gongGeArr[index].deviceId,
              channelId: this.gongGeArr[index].channelId,
            });
            this.singleGraph.push({
              pointName: this.gongGeArr[index].pointName,
              pointId: this.gongGeArr[index].pointId,
            });
            this.multiGraphArr.push(url);
          }

          // console.log('图片 :>> ', url);
        }

        if (this.multiGraphArr.length == 0) {
          this.$notify({
            message: "请保证打开视频后截图",
            type: "warning",
            duration: 4000,
          });
        } else {
          this.dialogFormVisible = true;
        }
      },
      // 打开的回调
      show() {
        this.$nextTick(() =>
          this.multiGraphArr.forEach((element, i) => {
            let myCanvas = document
              .getElementById("myCanvas" + i)
              .getContext("2d");
            let myCanvaswh = document.getElementById("myCanvas" + i);
            var parentComponent = document.getElementById("gwwh");
            var setWH = document.getElementById("canWH" + i);

            myCanvaswh.width = parentComponent.offsetWidth;
            myCanvaswh.height = parentComponent.offsetHeight;

            myCanvaswh.style = "width:" + setWH.offsetWidth + "px";
            myCanvaswh.style = "height:" + setWH.offsetHeight + "px";

            let img = new Image();
            img.src = element;

            img.onload = () => {
              // const Atrament = require('atrament')
              // const huabi = new Atrament(myCanvaswh, {
              //   width: parentComponent.offsetWidth - 58,
              //   height: parentComponent.offsetHeight,
              //   color: 'red',
              // })

              myCanvas.drawImage(img, 0, 0, myCanvaswh.width, myCanvaswh.height);
            };
          })
        );
      },
      // 编辑图片（调用子组件的显示方法）
      displayPicture() {
        console.log("调用了吗 :>> ");
        this.$refs["cpcvs" + this.index].openCvs();
      },
      // 拿传过来的index然后抓图
      chuanId2(id, device_id, channel_id) {
        console.log("二次调用 :>> ", id, device_id, channel_id);
        this.index = id;
        this.did = device_id;
        this.cid = channel_id;

        // 获取父组件宽高然后赋值
        var parentComponent = document.getElementById("gwh");
        var canvas = document.getElementById("canvas");
        canvas.style.width = parentComponent.offsetWidth - 58 + "px";
        canvas.style.height = parentComponent.offsetHeight + "px";

        var remoteVideoId = document.getElementById(
          "liveVideo" + id + "_html5_api"
        );
        console.log("抓到的图 :>> ", remoteVideoId);
        if (remoteVideoId) {
          this.cvsData = remoteVideoId;
          this.$refs["cpcvs" + id].openCvs();
          this.$refs["cpcvs" + id].quadraticSnapshot();
        }
      },
      // 弹出工单设置详情
      addWork(img_url) {
        console.log("调用了吗 :>> ");
        this.img_url = img_url;
      },
      // 网页全屏
      webFS() {
        document.body.classList.add("web-fullscreen-fix");
        if (this.videoStream === "HLS") return;
        // if (this.stream_type == 'xFLV' || this.stream_type =='xHLS' || this.stream_type == 'HLS') return
        this.$nextTick(() => {
          this.getHW();
        });
      },
      // 左侧播放树 搜索框:确认搜索
      searchTree() {
        this.$refs.qnDeviceTree.searchTree(this.filterText);
      },
      // 视频缩放调整
      getHW() {
        if (this.tabActive12_2 == true || this.tabActive12_2_old == true) {
          this.playerWidth = $(".video-item12_2").width();
          this.playerHeight = $(".video-item12_2").height();
        } else {
          this.playerWidth = $(".video-item").width();
          this.playerHeight = $(".video-item").height();
        }

        // this.rotate()
      },
      rotate() {
        let h = $(".video-scale .video-js").innerHeight();
        let seita = this.playerHeight / h;
        let deg = parseFloat(((Math.acos(seita) * 180) / Math.PI).toFixed(2));
        let top = (this.playerHeight - h) / 2;
        $(".video-js").css("transform", `rotateX(${deg}deg)`);
        $(".video-js").css("top", `${top}px`);
      },
      rotate2() {
        let h = $(".video-scale .video-js").innerHeight();
        let seita = this.playerHeight / h;
        let deg = parseFloat(((Math.acos(seita) * 180) / Math.PI).toFixed(2));
        let top = (this.playerHeight - h) / 2;
        if (window.innerHeight > 1200) {
          $(".video-js").css("transform", `scaleY(2.4)`);
        } else if (window.innerHeight >= 1100 && window.innerHeight <= 1200) {
          $(".video-js").css("transform", `scaleY(2.25)`);
        } else if (window.innerHeight > 1080 && window.innerHeight < 1100) {
          $(".video-js").css("transform", `scaleY(2.15)`);
        } else if (window.innerHeight >= 1050 && window.innerHeight <= 1080) {
          $(".video-js").css("transform", `scaleY(2.1)`);
        } else if (window.innerHeight >= 1000 && window.innerHeight < 1050) {
          $(".video-js").css("transform", `scaleY(2.05)`);
        } else if (window.innerHeight >= 950 && window.innerHeight < 1000) {
          $(".video-js").css("transform", `scaleY(1.9)`);
        } else if (window.innerHeight >= 850 && window.innerHeight < 900) {
          $(".video-js").css("transform", `scaleY(1.8)`);
        } else if (window.innerHeight >= 750 && window.innerHeight < 800) {
          $(".video-js").css("transform", `scaleY(1.7)`);
        } else if (window.innerHeight >= 725 && window.innerHeight < 750) {
          $(".video-js").css("transform", `scaleY(1.6)`);
        } else if (window.innerHeight >= 700 && window.innerHeight < 725) {
          $(".video-js").css("transform", `scaleY(1.5)`);
        } else if (window.innerHeight >= 650 && window.innerHeight < 700) {
          $(".video-js").css("transform", `scaleY(1.4)`);
        } else if (window.innerHeight > 625 && window.innerHeight < 650) {
          $(".video-js").css("transform", `scaleY(1.3)`);
        } else if (window.innerHeight > 600 && window.innerHeight < 625) {
          $(".video-js").css("transform", `scaleY(1.2)`);
        } else if (window.innerHeight <= 600) {
          $(".video-js").css("transform", `rotateX(${deg}deg)`);
          $(".video-js").css("top", `${top}px`);
        }
      },

      // 获取码流类型
      // getVideoStreamType() {
      //   getVideoStreamType().then(res => {
      //     if (res.data.code === 0) {
      //       window.localStorage.setItem('videoStreamType', res.data.data.stream_type)
      //       if (!res.data.data) return
      //       console.log(res.data.data.stream_type);
      //       this.stream_type = res.data.data.stream_type ? res.data.data.stream_type : 'HLS'
      //       this.videoStreamId = res.data.data.id
      //     }
      //   }).catch(err => {
      //     this.stream_type = 'HLS'
      //   })
      // },
      // 切换全屏

      changeFullScreen() {
        const el = this.$refs.videoArea;
        const rfs =
          el.requestFullScreen ||
          el.webkitRequestFullScreen ||
          el.mozRequestFullScreen ||
          el.msRequestFullScreen;
        if (typeof rfs !== "undefined" && rfs) {
          rfs.call(el);
          return;
        }
        if (typeof window.ActiveXObject !== "undefined") {
          const wscript = new ActiveXObject("WScript.Shell");
          if (wscript) {
            wscript.SendKeys("{F11}");
          }
        }
      },

      // 宫格数量: 被切换
      changeTab(tab, value, way) {
        this.rtmpSrc = "";
        this.deviceId = "";
        this.rtmpType = "";
        this.gatewayId = "";
        this.channelNum = "";

        this.has_active = false;
        // this.grid_select = -1

        this.$nextTick(() => {
          this.grid_select = -1;
          if (tab === 1) {
            this.grid_select = 0;
          } else if (tab === 12 && way == 3) {
            this.tabActive12_2 = false;
            this.tabActive12_3 = false;
            this.tabActive12_2_old = true;
          } else if (tab === 12 && way == 2) {
            this.tabActive12_2 = true;
            this.tabActive12_3 = false;
            this.tabActive12_2_old = false;
          } else {
            this.tabActive12_2 = false;
            this.tabActive12_3 = true;
            this.tabActive12_2_old = false;
          }

          this.grid_len = tab;
        });
      },
      changeGridSelect() {
        this.grid_select = -1;
      },
      heartBeat() {
        // 每个一段时间执行一次 心跳接口
        window.clearInterval(this.videoPlayTimer);
        this.videoPlayTimer = window.setInterval(() => {
          getHeartBeat();
        }, 180000);
      },

      // 播放树: 某一项被点击, 开始播放视频
      clickTree(data, checked, position, node) {
        console.log('id :>> ', data.id);
        console.log('id2 :>> ', node.parent.data.id)
        if (checked) {
          this.HISchannelId = data.id
          this.HISdeviceId = node.parent.data.id
        } else {
          this.HISchannelId = ''
          this.HISdeviceId = ''
          // 清空右侧高亮和播放状态
          this.$refs["videoPlayer" + 0][0].videoSrc = ''
          this.cursorInnerLayerWidth = 0

          if (this.beforeIndex) {
            let beforevidlist = document.getElementById(this.beforeIndex)
            beforevidlist.style = ''
            this.beforeIndex = ''
          }

          this.clickTime = ''

          this.videoList = []

          this.$refs['calendar'].highlight()
        }
      },
      // 通过ref,拿到子组件. 操作子组件
      getChildVal(
        position,
        checked,
        that,
        empty,
        tmpurl = "",
        data = {},
        node = {}
      ) {
        // 各参数: (位置, 打开视频?,this, 清空, url, data)
        // console.log('依次点击调用的事件的参数1 :>> ', position)
        // console.log('依次点击调用的事件的参数2 :>> ', checked)
        // console.log('依次点击调用的事件的参数3 :>> ', that)
        // console.log('依次点击调用的事件的参数4 :>> ', empty)
        // console.log('依次点击调用的事件的参数5 :>> ', tmpurl)
        // console.log('依次点击调用的事件的参数6 :>> ', data)
        // console.log('依次点击调用的事件的参数7 :>> ', node)
        if (empty == 1) {
          // 清空子组件 如下属性值
          that.$refs["videoPlayer" + position][0].videoSrc = "";
          that.$refs["videoPlayer" + position][0].device_id = "";
          that.$refs["videoPlayer" + position][0].channel_id = "";
          that.$refs["videoPlayer" + position][0].branchinfo = {};
          // that.$refs['videoPlayer' + position][0].videoId = ''
          // that.$refs['videoPlayer' + position][0].videoTitle = ''
          // that.$refs['videoPlayer' + position][0].videoType = ''
          // that.$refs['videoPlayer' + position][0].gatewayId = ''
          // that.$refs['videoPlayer' + position][0].channelNum = ''
        } else if (empty == 0) {
          that.$refs["videoPlayer" + position][0].videoSrc = tmpurl;
          that.$refs["videoPlayer" + position][0].device_id = node.parent.data.id;
          that.$refs["videoPlayer" + position][0].channel_id = data.id;
          that.$refs["videoPlayer" + position][0].branchinfo = data.branchinfo;
          // that.$refs['videoPlayer' + position][0].videoId = data.deviceIndex
          // that.$refs['videoPlayer' + position][0].videoTitle = data.name
          // that.$refs['videoPlayer' + position][0].videoType = data.type
          // that.$refs['videoPlayer' + position][0].gatewayId = data.deviceID
          // that.$refs['videoPlayer' + position][0].channelNum = data.number
        }
        that.$nextTick(() => {
          if (that.has_active && that.grid_select == position) {
            // (1)有处于活跃的宫格
            if (checked) {
              // 打开活跃宫格的视频,或者切换活跃宫格:  保存处于活跃的视频播放参数
              let child_ele = that.$refs["videoPlayer" + position][0];
              that.rtmpSrc = child_ele.videoSrc;
              that.device_id = child_ele.device_id;
              that.channel_id = child_ele.channel_id;
              that.branchinfo = child_ele.branchinfo;
              // that.deviceId = child_ele.videoId
              // that.rtmpType = child_ele.videoType
              // that.gatewayId = child_ele.gatewayId
              // that.channelNum = child_ele.channelNum
            } else {
              // 关闭活跃宫格的视频
              that.rtmpSrc = "";
              that.device_id = "";
              that.channel_id = "";
              that.branchinfo = {};
              // that.deviceId = ''
              // that.rtmpType = ''
              // that.gatewayId = ''
              // that.channelNum = ''
            }
          } else {
            // (2)无活跃的宫格
            that.rtmpSrc = "";
            that.device_id = "";
            that.channel_id = "";
            that.branchinfo = {};
            // this.deviceId = ''
            // this.rtmpType = ''
            // this.gatewayId = ''
            // this.channelNum = ''
          }

          // if(checked) getHeartBeat()   // 无论是否有活跃的宫格, 打开视频都要 调用此函数
        });
      },
      // 宫格: 某一项被点击
      handleGrid(argu) {

        this.singleGraphID = this.gongGeArr[argu[0]].pointId;
        this.singleGraphName = this.gongGeArr[argu[0]].pointName;

        this.index = argu[0];

        let position = argu[0];
        let is_active = argu[1];

        if (!this.has_active && !is_active) {
          // 没有被选中的宫格, 则让当前被点击的宫格处于活跃
          this.has_active = true;
          this.grid_select = position;
        } else if (this.has_active && is_active) {
          // 有被选中的宫格, 活跃的再次接受点击,则取消活跃
          this.has_active = false;
          this.grid_select = -1;
        } else if (this.has_active && !is_active) {
          // 有被选中的宫格, 非活跃的被点击,则切换活跃宫格
          this.has_active = true;
          this.grid_select = position;
        }
        this.getChildVal(position, !is_active, this, -1);
        // this.$refs.qnDeviceTree.changePosition(this.grid_select)
      },

      // 云台控制
      changePtz(command) {
        ptzControl({
            deviceIndex: this.deviceId,
            ptzCommand: command,
            speed: 0,
            gatewayIndex: this.gatewayId,
            channelNum: this.channelNum,
          })
          .then((res) => {
            if (res.data.code !== 0) {
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            // this.$message.error(err.message)
          });
      },
    },
  };
</script>

<style lang="scss">
  @import "~@/styles/variables.scss";

  .el-dialog {
    .el-dialog__header {
      background-color: #f5f7f5 !important;
    }

    .el-carousel__container {
      position: relative;
      height: 100%;
    }
  }
</style>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  // 游标进度
  .cursorProgress {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none;

    // 游标的内层
    .cursorInnerLayer {
      background-color: pink;
      position: absolute;
      height: 50%;
    }
  }

  .calendar {
    width: 25%;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 70px;
    right: 0px;
    border-left: 1px solid #b6b6b6;
    overflow: scroll;
  }

  // 模拟进度条
  .time-scroll {
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    position: relative;

    // padding-left: 30px;
    .time-s-box {
      width: 100%;
      height: 55px;
      position: relative;
      background: #fff;
    }

    .hours {
      width: 100%;
      position: absolute;
      bottom: 0px;
      display: flex;

      .item {
        flex: 1;
        height: 8px;
        border-right: 1px solid #b6b6b6;
        position: relative;
        border-radius: 1px;

        span {
          position: absolute;
          top: 10px;
          left: -30px;
          // z-index: 10;
          font-size: 12px;
          font-family: SimSun;
          font-weight: 400;
          color: #9298a7;
          width: 60px;
          text-align: center;
        }

        &:first-child {
          span {
            left: 0px;
            text-align: left;
          }
        }

        &:last-child {
          flex: 0;
          width: 0;
          border: 0;

          span {
            left: -3.6rem;
            text-align: right;
          }
        }

        // .rule {
        //   position: absolute;
        //   top: 0;
        //   height: 5px;
        //   border-left: 1px solid #777;
        //   left: 25%;
        // }
        // .rule:nth-child(2) {
        //   left: 50%;
        // }
        // .rule:nth-child(3) {
        //   left: 75%;
        // }
      }
    }

    .history-list {
      width: 100%;
      height: 22px;
      position: absolute;
      background: #efeff1;
      bottom: 14px;
      left: 0;

      .item {
        position: absolute;
        // height: 100%;
        height: 55px;
        bottom: -16px;

        div {
          position: absolute;
          width: 100%;
          height: 22px;
          bottom: 16px;
          background: #108cfd;
        }
      }
    }

    .time-bar {
      position: absolute;
      bottom: -16px;
      height: 36px;
      border-left: 3px solid #ff7275;

      span {
        position: absolute;
        left: -34px;
        top: -20px;
        font-size: 14px;
        font-family: SimSun;
        font-weight: bold;
        color: #ff7275;
      }
    }
  }

  // 视屏列表
  .videoList {
    width: 100%;
    padding-bottom: 50px;

    .videoListHead {
      width: 100%;
      height: 25px;
      background-color: #b6b3b3;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .quantityList {
      border: 1px solid;
      border-color: #5a9bd8;
      border-radius: 3px;
      margin: 10px;
      /* 禁止选中 */
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }

    .quantityList:hover {
      cursor: pointer
    }
  }

  // --------------------------------------------------------------------------

  .MultiGraphPage {
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: #ffffff;
    top: 28%;
    left: 33%;
  }

  .device-tree-title {
    font-family: Microsoft YaHei;
    font-weight: 400;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f8f8;
    padding: 0 10px;

    .title {
      font-size: 18px;
      color: #333;
    }

    .tree-search {
      /*margin-bottom: 10px;*/
      // flex: 0 0 40px;
      // margin-left: 15px;
      // width: calc(100% - 30px);
      width: 60%;

      .el-input__suffix {
        width: 32px;
        height: 32px;
        background: #fff;
        border-radius: 0px 4px 4px 0px;
        border: 1px solid #dcdfe6;
        top: 0px;
        right: 0px;
        box-sizing: border-box;
      }

      .search-icon {
        color: #aaa;
        cursor: pointer;
        font-size: 16px;
        // font-weight: bold;
        height: 32px;
      }
    }
  }

  .gw-home {
    // background-color: aqua;
    height: 100%;
    display: flex;

    .home-part {
      height: 100%;

      .panel-container {
        background: #fff;
        overflow: hidden;

        .panel-title {
          position: relative;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 60px;
          color: #333;
          padding-left: 30px;
        }

        .panel-title2 {
          // background-color: #cfd;
          background-color: #f9f9f9;
          position: relative;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 60px;
          color: #333;
          padding-left: 30px;
          display: flex;
          justify-content: space-between;
        }

        .panel-title-grey {
          background: #f8f8f8;
        }
      }

      .home-left {
        display: flex;
        flex-direction: column;
        height: 100%;

        .source-list {
          height: 100%;
          // min-height: 520px;
          display: flex;
          flex-direction: column;
          position: relative;

          .tree-container {
            flex: 1;
            padding-top: 20px;
            overflow: hidden;
          }

          .coverPlatform {
            cursor: pointer;
            // position: absolute;
            // bottom: 20px;
            line-height: 30px;
            width: 100%;
            text-align: center;

            i {
              color: #b1beff;
            }
          }
        }

        .camera-platform {
          flex: 0 0 310px;
          display: flex;
          flex-direction: column;

          .camera-directive {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            .not-allowed {
              pointer-events: none;
            }

            .directive-container {
              // width: 208px;
              width: 164px;
              // height: 180px;
              height: 160px;
              background: #fff;
              border: 1px solid rgba(200, 200, 200, 1);
              border-radius: 20px;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              // padding: 26px 40px;
              padding: 20px 16px 16px;

              p {
                width: 100%;
                display: flex;
                justify-content: space-between;
              }

              i {
                // display: inline-block;
                box-sizing: border-box;
                width: 34px;
                height: 34px;
                font-size: 14px;
                color: $text_light;
                cursor: pointer;
                position: relative;
                border: 2px solid #a0a4ba;
                border-radius: 6px;
                display: flex;
                justify-content: center;
                align-items: center;

                &:before {
                  // display: inline-block;
                  // position: absolute;
                }

                &:hover {
                  color: $my-primary;
                  border-color: $my-primary;
                }

                &.is-disabled {
                  pointer-events: none;
                  opacity: 0.5;
                  cursor: not-allowed !important;
                }
              }

              .icon1:before {
                // left: 5px;
                // top: 8px;
                transform: rotateZ(-45deg);
              }

              // .icon2:before {
              //   // top: 8px;
              //   // left: 6px;
              // }
              .icon3:before {
                // top: 8px;
                // left: 10px;
                transform: rotateZ(45deg);
              }

              .icon4:before {
                // top: 8px;
                // left: 5px;
                transform: rotateZ(-90deg);
              }

              .icon5 {
                font-size: 20px;
                // &:before {
                //   // top: 3px;
                //   // left: 5px;
                // }
              }

              .icon6:before {
                // top: 8px;
                // left: 7px;
                transform: rotateZ(90deg);
              }

              .icon7:before {
                // top: 10px;
                // left: 5px;
                transform: rotateZ(-135deg);
              }

              .icon8:before {
                // top: 8px;
                // left: 6px;
                transform: rotateZ(180deg);
              }

              .icon9:before {
                // top: 10px;
                // left: 8px;
                transform: rotateZ(135deg);
              }
            }

            .float-layer {
              position: absolute;
              z-index: 10;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              cursor: not-allowed !important;
            }
          }
        }
      }

      .home-right {
        height: calc(100vh - 60px);
        // height: calc(100% - 60px);
        display: flex;
        flex-direction: column;
        // overflow: hidden;

        .operator {
          .workorder-btn {
            color: var(--app_primary);
            font-size: 12px;
            display: inline-flex;
            margin-right: 40px;
            justify-content: space-between;

            .btn-item {
              width: 80px;
              line-height: 30px;
              border: 1px solid var(--app_primary);
              border-radius: 3px;
              text-align: center;
              margin-right: 12px;
              cursor: pointer;
            }
          }

          // background-color: #f99;
          // position: absolute;
          // top: 0;
          // right: 30px;
          i {
            font-style: normal;
            font-size: 20px;
            cursor: pointer;
            color: #bbb;

            &:not(:last-child) {
              margin-right: 20px;
            }

            &.active {
              color: $my-primary;
            }

            &:hover {
              color: $my-primary;
            }

            &.disabled {
              cursor: not-allowed;
            }

            &.disabled:hover {
              color: #dddddd;
            }
          }

          .iconfont12 {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
          }
        }

        .panel-content {
          height: 100%;
          width: 100%;
          flex: 1;
          padding: 10px 30px;
          // position: relative;
          overflow: hidden;

          .video-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;

            .video-item {
              margin-bottom: 1px;
              display: inline-block;
              overflow: hidden;
            }

            &.video-item-25 .video-item {
              width: 19.9%;
              height: 19.8%;
            }

            &.video-item-24 .video-item {
              width: 16.62%;
              height: 24.867%;

              &:nth-child(1) {
                order: 1;
              }

              &:nth-child(2) {
                order: 2;
              }

              &:nth-child(3) {
                order: 7;
              }

              &:nth-child(4) {
                order: 8;
              }

              &:nth-child(5) {
                order: 3;
              }

              &:nth-child(6) {
                order: 4;
              }

              &:nth-child(7) {
                order: 9;
              }

              &:nth-child(8) {
                order: 10;
              }

              &:nth-child(9) {
                order: 5;
              }

              &:nth-child(10) {
                order: 6;
              }

              &:nth-child(11) {
                order: 11;
              }

              &:nth-child(12) {
                order: 12;
              }

              &:nth-child(13) {
                order: 13;
              }

              &:nth-child(14) {
                order: 14;
              }

              &:nth-child(15) {
                order: 19;
              }

              &:nth-child(16) {
                order: 20;
              }

              &:nth-child(17) {
                order: 15;
              }

              &:nth-child(18) {
                order: 16;
              }

              &:nth-child(19) {
                order: 21;
              }

              &:nth-child(20) {
                order: 22;
              }

              &:nth-child(21) {
                order: 17;
              }

              &:nth-child(22) {
                order: 18;
              }

              &:nth-child(23) {
                order: 23;
              }

              &:nth-child(24) {
                order: 24;
              }
            }

            &.video-item-16 .video-item {
              width: 24.9%;
              height: 24.8%;
            }

            &.video-item-12 .video-item {
              width: 24.9%;
              height: 33.1%;
            }

            &.video-item-12 .video-item12_2 {
              width: 16.55%;
              height: 49.8%;
            }

            &.video-item-9 .video-item {
              width: 33.25%;
              height: 33.1%;
            }

            &.video-item-4 .video-item {
              width: 49.97%;
              height: 49.85%;
            }

            &.video-item-1 .video-item {
              width: 100%;
              height: 100%;
            }
          }

          .device-list {
            position: absolute;
            top: 10px;
            right: 0;
            width: 345px;
            height: calc(100% - 20px);
            padding-right: 14px;

            .device-item {
              width: 100%;
              padding: 10px;
              border: 1px solid $border-light;
              margin-top: 20px;
              cursor: pointer;

              &:first-child {
                margin-top: 0;
              }

              &.active {
                border: 2px solid #ff941d;
              }

              .device-title {
                position: relative;
                margin-bottom: 6px;

                i {
                  position: absolute;
                  display: inline-block;
                  top: 6px;
                  left: 0;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;

                  &.device-offline {
                    background: $my-danger;
                  }

                  &.device-online {
                    background: $my-success;
                  }
                }

                span {
                  display: block;
                  font-size: 14px;
                  color: $text_dark;
                  padding-left: 15px;
                }
              }

              .device-img {
                display: inline-block;
                width: 100%;
              }
            }
          }
        }
      }
    }

    .left-home-part {
      width: 255px;
      overflow: hidden;
      margin-right: 12px;
    }

    .right-home-part {
      flex: 1;
      border-left: 1px solid #e8e8e8;
    }

    .el-dialog {
      .img-container {
        height: 60vh;
        min-height: 380px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;

        .img-item {
          // background-color: aqua;

          &.w99 {
            width: 99%;
            height: 99%;
          }

          &.w49 {
            width: 49%;
            height: 49%;
          }

          &.w32 {
            width: 32%;
            height: 32%;
          }

          &.w24 {
            width: 24%;
            height: 24%;
          }

          &.w16 {
            width: 16%;
            height: 16%;
          }

          &.w19 {
            width: 19%;
            height: 19%;
          }
        }
      }

      .wk-container {
        height: 60vh;
        min-height: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .wk-container-item {
          flex: 1;
          height: 100%;
        }

        .wk-img {
          flex: 1;

          .el-image {
            width: 100%;
            height: 100%;
          }

          .edit-img {
            cursor: pointer;
            color: var(--app_primary);
            text-align: right;
            font-size: 12px;
            padding-right: 5px;
          }
        }

        .wk-info {
          flex: 1;
          background-color: rgb(255, 255, 255);
        }
      }
    }
  }
</style>
